<template>
  <div class="banner">
    Albums
  </div>
  <br>
  <el-row>
    <el-col :span="4"></el-col>
    <el-col :span="16">
      <div class="albums">
        <el-space wrap size="large" v-if="albums.length > 0">
          <el-card v-for="album in albums" style="width: 300px;" :body-style="{padding:0}"
                   @click="toView(album.albumId)">
            <template #header>
              <div class="card-header">
                <span>{{ album.albumName }}</span>
              </div>
            </template>
            <el-tooltip
                effect="dark"
                :content="album.albumDescription"
                placement="bottom">
              <el-image :src="album.albumCover"
                        @click="toPictureManage(item.albumId)"
                        fit="cover"
                        style="width: 300px;height: 220px;border: 1px solid #eae5e5"></el-image>
            </el-tooltip>
          </el-card>
        </el-space>
        <div v-else style="height: 200px;text-align: center;padding-top: 100px">
          <h2 style="font-weight: bolder;color: #257763">没有展示的相册</h2>
        </div>
      </div>
    </el-col>
    <el-col :span="4"></el-col>
  </el-row>
</template>

<script>
export default {
  name: "Albums",
  async created() {
    let {data: result} = await this.$http.get("/api/album/getShowAlbums")
    this.albums = result.dataMap.albums
  },
  data() {
    return {
      albums: []
    }
  },
  methods: {
    toView(albumId) {
      this.$router.push({path: '/albums/' + albumId})
    }
  }
}
</script>

<style scoped>
.banner {
  background-image: url('@/assets/headImg/album.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;

  color: white;
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
  padding-top: 200px;
}

.albums {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 1px solid #90adab;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /*height: 200px;*/
  padding: 40px;
}
</style>